<template>
  <div id="echarts4"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts4()
  },
  created() {},
  methods: {
    showEcharts4() {
      let myChart = this.$echarts.init(document.getElementById('echarts4'))
      let data = this.data
      let nameList = data.map((m) => m.name)
      let valueList = data.map((m) => m.value)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '1%',
          top: '6%',
          containLabel: true,
        },
        // legend: {
        //   data: ['1', '2', '3'],
        //   right: 10,
        //   top: 12,
        //   textStyle: {
        //     color: '#fff',
        //   },
        //   itemWidth: 12,
        //   itemHeight: 10,
        //   // itemGap: 35
        // },
        xAxis: {
          type: 'category',
          data: nameList,
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 30,
            normal: {
              fontSize: 12,
            },
            textStyle: {
              fontFamily: 'Microsoft YaHei',
            },
          },
        },
        yAxis: {
          type: 'log',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed',
            },
          },
          axisLabel: {},
        },

        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                //柱形图上方标题
                label: {
                  show: true,
                  position: 'top',
                  // textStyle: {
                  color: '#fff',
                  fontSize: 12,
                  // },
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#248ff7',
                  },
                  {
                    offset: 1,
                    color: '#6851f1',
                  },
                ]),
                barBorderRadius: 11,
              },
            },
            data: valueList,
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
